<script lang="ts" setup>
import { useRoute } from "vue-router"
import { requestUserDetailInfo } from "../../utils/axiosURL"
import { onMounted, ref } from "vue";
import indexText from "./indexText.json"
import userChartShowState from "../../store/chartExample";
import { storeToRefs } from "pinia";

const chartShowStateFn = userChartShowState()
const { state } = storeToRefs(userChartShowState())
const route = useRoute()
const userDetailID = ref<any>(route.query.id)
// 存储用户动态数据
// let saveUserDynamic = reactive<any>({})
// 用户头像
let headImg = ref<string>('')
// 用户昵称
let userNickName = ref<string>('')
// 用户性别
let userSex = ref<number>(0)
// 用户Vip
let vipType = ref<number>(0)
// 个人介绍
let personalIntroduction = ref<string>('')
// 粉丝
let follows = ref<number>(0)
// 动态
let eventCount = ref<number>(0)
// 用户听歌数
const userListenCount = ref<any>(0)
// 粉丝
let followeds = ref<number>(0)
// 用户id数据
let userId = ref<number>(0)
// 昵称
let nickname = ref<string>('')
// 子路由显示状态
let childNavState = ref<number>(0)

// 用户动态数据
const requestUserDetailInfoFn = () => {
  requestUserDetailInfo(userDetailID.value).then((data: any) => {
    // saveUserDynamic = Object.assign(saveUserDynamic,{...data})
    headImg.value = data.profile.avatarUrl
    userNickName.value = data.profile.nickname
    userSex.value = data.profile.gender
    vipType.value = data.profile.vipType
    personalIntroduction.value = data.profile.description
    follows.value = data.profile.follows
    eventCount.value = data.profile.eventCount
    followeds.value = data.profile.followeds
    userId.value = data.profile.userId
    nickname.value = data.profile.nickname
    userListenCount.value = data.listenSongs
    chartShowStateFn.changeUserListenCount(data.listenSongs, userNickName.value, userId.value)
  }).catch(_ => { })
}

onMounted(() => {
  requestUserDetailInfoFn()
})
</script>

<template>
  <div class="totalWrap">
    <div class="userWrap">
      <div class="leftAvatar">
        <div class="avatarWrap">
          <img :src="`${headImg}`" alt="">
        </div>
      </div>
      <div class="rightInfo">
        <div class="topWrap">
          <p class="userName">{{ userNickName }}</p>
          <p class="vipAndSex">
            <span class="iconfont icon-VIP-03"></span>
            <span v-if="vipType === 1" class="iconfont icon-VIP-1"></span>
            <span v-if="vipType === 2" class="iconfont icon-VIP-02"></span>
            <span v-if="vipType === 3" class="iconfont icon-VIP-03"></span>
            <span v-if="vipType === 4" class="iconfont icon-VIP-04"></span>
            <span v-if="vipType === 5" class="iconfont icon-VIP-"></span>
            <span v-if="vipType === 6" class="iconfont icon-VIP-06"></span>
            <span v-if="vipType === 7" class="iconfont icon-VIP-07"></span>
            <span v-if="vipType === 8" class="iconfont icon-VIP-08"></span>
            <span v-if="vipType === 9" class="iconfont icon-VIP-09"></span>
            <span v-if="vipType === 10" class="iconfont icon-VIP-10"></span>
            <span v-if="vipType === 11" class="iconfont icon-VIP-11"></span>
            <span v-if="userSex === 1" class="iconfont icon-xingbienan"></span>
            <span v-if="userSex === 2" class="iconfont icon-xingbienv"></span>
          </p>
        </div>
        <div class="btmWrap">
          <div class="dynamicData">
            <RouterLink :to="{ path: '/UserDynamic', query: { id: userId, nickNames: nickname } }">
              <div class="dynamic">
                <p class="">{{ eventCount }}</p>
                <p class="">{{ indexText.dynamic }}</p>
              </div>
            </RouterLink>
            <RouterLink :to="{ path: '/UserPayAttention', query: { id: userId, nickNames: nickname } }">
              <div class="payAttention">
                <p class="">{{ follows }}</p>
                <p class="">{{ indexText.payAttention }}</p>
              </div>
            </RouterLink>
            <RouterLink to="/">
              <div class="vermicelli">
                <p class="">{{ followeds }}</p>
                <p class="">{{ indexText.vermicelli }}</p>
              </div>
            </RouterLink>
          </div>
          <p>{{ indexText.localArea }}: 福建省 福州市</p>
          <p>{{ indexText.socialNetwork }}: 未绑定</p>
          <p>{{ indexText.personalIntroduction }}: {{ personalIntroduction === '' ? '暂无介绍' : personalIntroduction }}</p>
        </div>
      </div>
    </div>
    <div class="childWrap">
      <ul class="childNav">
        <li v-for="(item, index) in indexText.childNav" @click="() => { childNavState = index }"
          :class="`${childNavState === index ? 'childNavState' : ''}`">
          <RouterLink :to="{ path: item.to, query: { id: userDetailID } }">{{ item.text }}</RouterLink>
        </li>
      </ul>
      <ul class="chart" v-if="childNavState === 1 || childNavState === 0">
        <span @click="() => chartShowStateFn.changeState(0)" :class="`${state === 0 ? 'chartActive' : ''}`" title="大图展示"
          class="iconfont icon-dasuolvetuliebiao"></span>
        <span @click="() => chartShowStateFn.changeState(1)" :class="`${state === 1 ? 'chartActive' : ''}`" title="列表展示"
          class="iconfont icon-danlieliebiao"></span>
        <span @click="() => chartShowStateFn.changeState(2)" :class="`${state === 2 ? 'chartActive' : ''}`" title="图列展示"
          class="iconfont icon-relituliebiao"></span>
      </ul>
    </div>
    <router-view />
  </div>
</template>

<style lang="scss" scoped>
.totalWrap {
  width: 100%;
  height: 93%;
  overflow: auto;
}

.userWrap {
  display: flex;
  width: 100%;
  padding-left: 10px;
  box-sizing: border-box;

  .leftAvatar {
    position: relative;
    flex-basis: 230px;
    width: 230px;
    height: 230px;

    .avatarWrap {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .rightInfo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 15px 0;

    .topWrap {
      display: flex;
      justify-content: space-evenly;
      flex-direction: column;
      flex-basis: 70px;

      .userName {
        font-size: $font-size-lg2;
        font-family: $activeTextFont;
      }

      .vipAndSex {
        span {
          margin-right: 10px;
        }

        .icon-VIP-1 {
          color: rgb(253, 237, 212)
        }

        .icon-VIP-02 {
          color: rgb(158, 196, 246)
        }

        .icon-VIP-03 {
          color: rgb(240, 76, 124)
        }

        .icon-VIP-04 {
          color: rgb(216, 99, 242)
        }

        .icon-VIP- {
          color: rgb(76, 180, 231)
        }

        .icon-VIP-06 {
          color: rgb(252, 193, 45)
        }

        .icon-VIP-07 {
          color: rgb(243, 166, 148)
        }

        .icon-VIP-08 {
          color: rgb(220, 199, 225)
        }

        .icon-VIP-09 {
          color: rgb(221, 187, 153)
        }

        .icon-VIP-10 {
          color: rgb(229, 168, 75)
        }

        .icon-VIP-11 {
          color: rgb(102, 43, 31)
        }

        .icon-xingbienan {
          color: rgb(117, 185, 235)
        }

        .icon-xingbienv {
          color: rgb(255, 62, 201)
        }
      }
    }

    .btmWrap {
      flex: 1;

      .dynamicData {
        display: flex;
        align-items: center;
        padding-top: 20px;
        border-top: 1px solid $lineColor;
        margin-bottom: 10px;

        a {
          >div {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: $textFont;

            p:nth-child(1) {
              font-size: $font-size-lg;
              margin-bottom: 4px;
            }

            p:nth-child(2) {
              font-size: $font-size-sm;
              color: $font_main_color;
            }

            &~div {
              border-left: 1px solid $lineColor;
            }
          }

          .dynamic {
            padding-right: 30px;
          }

          .payAttention {
            padding: 0 30px;
          }

          .vermicelli {
            padding-left: 30px;
          }
        }
      }

      >p {
        font-size: $font-size-xs;
        font-family: $textFont;
        line-height: 20px;
      }
    }
  }
}

.childWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;

  .childNav {
    display: flex;
    flex: 1;
    width: 500px;
    font-size: 15px;
    font-family: $textFont;
    line-height: 30px;
    padding-left: 15px;

    li {
      padding: 0 10px;
    }

    .childNavState {
      position: relative;
      font-size: $font-size-md;
      font-family: $activeTextFont;

      &::after {
        content: "";
        position: absolute;
        left: calc(100% - 90%);
        bottom: 0;
        width: 80%;
        height: 3px;
        @include background_color('bk_color');
      }
    }
  }

  .chart {
    flex-basis: 84px;
    display: flex;
    justify-content: end;
    margin-right: 20px;
    border-radius: 4px;
    overflow: hidden;

    span {
      font-size: $font-size-xs;
      color: $font_second_color;
      padding: 4px 8px;
      background-color: rgb(242, 242, 242);
    }

    .chartActive {
      background-color: rgb(191, 191, 191);
      color: $theme-white;
    }
  }
}
</style>
